<script setup>
    import { ref } from 'vue';
    const emit = defineEmits()
    const title = ref('')
    const onEnter = () => {
        if(!title.value) {
            return alert('任务不能为空')
        }
        emit('add',title.value)
    }
</script>

<template>
  <header class="header">
    <h1>⽐特⼈的记事本</h1>
    <input 
      class="new-todo" 
      placeholder="What needs to be finished?" 
      autofocus
      v-model.trim="title"
      @keydown.enter="onEnter"
    />
  </header>
</template>
